<template>
  <div class="about">
    <van-pull-refresh 
    v-model="refreshing" 
    @refresh="onRefresh">
      <van-list
       v-model="loading"
       finished-text="没有更多了"
       :finished="finished"
       @load="onLoad"
      >
        <van-cell v-for="item in list" 
        :key="item" 
        :title="item" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data(){
    return{
      refreshing:false,
      loading:false,
      finished:false,
      list:[]
    }
  },
  methods:{
    // 下拉刷新触发
    onRefresh(){
      console.log("refreshing:",this.refreshing);
      
      this.finished = false;
      setTimeout(() => {
        this.list = [];
        for(let index=30;index<50;index++){
          this.list.push(index);
          this.refreshing = false;
        }
      }, 3000);
    },
    //上拉加载
    onLoad(){
      console.log("loading:",this.loading);
      //模拟异步请求
      setTimeout(() => {
        for(let index=0;index<20;index++){
           this.list.push(index)
           this.loading = false;
        }
        if(this.list.length > 100){
          this.finished = true;
        }
      }, 3000);
    }
  }
}
</script>
